<template>
  <div id="login_form">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm ">
        <el-form-item  >
            <img src="@/assets/logo.png" style="margin-top:100px;"> 
        </el-form-item>
        <el-form-item label="账号" prop="username" >
            <el-input type="texxt" v-model="ruleForm.username" autocomplete="off" style="margin:10px 0;"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" style="margin:10px 0;"></el-input>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="submitForm()" style="width:100%; margin:5px 0;" >登录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>

    import {login,getInfo} from '@/api/login';
    import Cookies from 'js-cookie';

    export default {
        name: "Login",
        data() {
            var usernameValidate = (rule, value, callback) => {
                console.log("username = ",value)
                if (value == ''||value.length<4) {
                    callback(new Error('请输入账号'));
                } else {
                    callback();
                }
            };
            var passwordValidate = (rule, value, callback) => {
                console.log("password = ",value)
                if (value == ''||value.length<4) {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [{required: true,validator: usernameValidate, trigger: 'blur' }],
                    password: [{ required: true,validator: passwordValidate, trigger: 'blur' }],
                }
            };
        },
        methods: {
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        //登录
                        login(this.ruleForm).then(response=>{
                            console.log("response = >",response);
                            //第一个参数cookie名称，第二个参数值，第三个参数作用范围
                            Cookies.set('guli_token',response.data.token,{domain: 'localhost'});
                            //获取用户信息，但需要通过拦截器把token存到请求头中
                            getInfo().then(response=>{
                                console.log("userInfo = >",response);
                                Cookies.set('guli_user',response.data,{domain: 'localhost'});
                            })
                            //跳转页面
                            this.$router.push("/main");
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped>

  #login_form div.el-form-item{
    margin-top: 50px;
    width: 400px;
    margin: 0 auto;
  }

</style>
